<template>
  <div class="themeCheck">
    <el-popover placement="bottom"
                width="150"
                trigger="click">
        <el-radio-group v-model="text"
                        class="list">
          <el-row :gutter="20">
            <el-col v-for="(item,index) in list"
                    :key="index"
                    :span="8">
              <el-tooltip :content="item.label" :placement="index>2?'bottom':'top'" effect="light" :enterable="false">
                <div class="bg" :style="{background:item.value}" @click="checkBg(item.name)">
                  <div class="checkBg" v-show="checked==item.name"></div>
                </div>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-radio-group>

      <div slot="reference">
      <span class="pointerDom">
        <el-badge>
          <i class="icon-zhuti"></i>
        </el-badge>
        <span class="word">换肤</span>
      </span>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { setTheme } from "@/util/util";
import { mapGetters } from "vuex";
export default {
  data () {
    return {
      box: false,
      text: "",
      list: [
        {
          name: "theme-blue",//default
          value: "#1C7DF0",
          label:'商务蓝'
        },
        {
          name: "theme-white",
          value: "#ff9923",
          label:'霞光橘'
        },
        {
          name: "theme-cool",
          value: "#D71A22",
          label:'靓丽红 '
        },
        {
          name: "theme-hey",
          value: "#13C09C",
          label:'高尚绿'
        },
        {
          name: "theme-star",
          value: "#DB42FF",
          label:'烂漫紫'
        },
        {
          name: 'theme-lte',//"theme-dark",
          value: "#ffb0be",
          label:'清新粉'
        },
      ],
      checked:''
    };
  },
  watch: {
    text: function (val) {
      this.$store.commit("SET_THEME_NAME", val);
      setTheme(val);
    }
  },
  computed: {
    ...mapGetters(["themeName"])
  },
  mounted () {
    this.text = this.themeName;
    if (!this.text) {
      this.text = "";
    }
  },
  methods: {
    open () {
      this.box = true;
    },
    checkBg(value){
      this.checked = value
      this.text = value
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
}
.word{
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 14px;
  margin-left: 6px;
}
  .bg{
    width: 30px;
    height: 30px;
    border: 1px solid #c7c7c7;
    padding:4px;
    box-sizing:border-box;
    cursor:pointer;
    border-radius: 4px;
  }
.checkBg{
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  box-sizing:border-box;
  border-radius: 4px;
}
</style>

